<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行社系统 - 个人资料</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/main.css">
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="container-fluid">
            <div class="row">
                <sidebar-nav 
                    current-page="profile"
                    @logout="handleLogout">
                </sidebar-nav>

                <!-- 主内容区 -->
                <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                        <h1 class="h2">个人资料</h1>
                    </div>

                    <div class="row">
                        <div class="col-md-8">
                            <form @submit.prevent="handleSubmit" class="needs-validation" novalidate>
                                <!-- 基本信息卡片 -->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h5 class="mb-0">基本信息</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label">用户名</label>
                                                <input type="text" class="form-control" v-model="form.username" disabled>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">电子邮箱</label>
                                                <input type="email" class="form-control" v-model="form.email" required>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label">角色</label>
                                                <input type="text" class="form-control" v-model="form.role" disabled>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">状态</label>
                                                <input type="text" class="form-control" :value="form.is_active ? '启用' : '禁用'" disabled>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label">创建时间</label>
                                                <input type="text" class="form-control" :value="formatDate(form.created_at)" disabled>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">更新时间</label>
                                                <input type="text" class="form-control" :value="formatDate(form.updated_at)" disabled>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 修改密码卡片 -->
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h5 class="mb-0">修改密码</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label">当前密码</label>
                                                <input type="password" class="form-control" v-model="form.current_password">
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label">新密码</label>
                                                <input type="password" class="form-control" v-model="form.new_password"
                                                    :required="!!form.current_password">
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">确认新密码</label>
                                                <input type="password" class="form-control" v-model="form.confirm_password"
                                                    :required="!!form.current_password">
                                            </div>
                                        </div>
                                        <div class="text-muted small">
                                            <i class="bi bi-info-circle"></i> 如果不需要修改密码，请留空以上密码字段
                                        </div>
                                    </div>
                                </div>

                                <div class="d-grid gap-2 d-md-flex justify-content-md-end mb-4">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-save"></i> 保存修改
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/api/config.js"></script>
    <script src="js/api/auth.js"></script>
    <script src="js/components/Sidebar.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                form: {
                    username: '',
                    email: '',
                    role: '',
                    is_active: true,
                    created_at: null,
                    updated_at: null,
                    current_password: '',
                    new_password: '',
                    confirm_password: ''
                },
                currentUser: null
            },
            created() {
                const userStr = localStorage.getItem(API_CONFIG.USER_KEY);
                if (userStr) {
                    this.currentUser = JSON.parse(userStr);
                    this.loadProfile();
                }
            },
            methods: {
                formatDate(date) {
                    if (!date) return '';
                    return new Date(date).toLocaleString('zh-CN');
                },
                async loadProfile() {
                    try {
                        const response = await window.apiClient.get(`/api/users/${this.currentUser.id}`);
                        const { username, email, role, is_active, created_at, updated_at } = response.data;
                        this.form = {
                            ...this.form,
                            username,
                            email,
                            role,
                            is_active,
                            created_at,
                            updated_at
                        };
                    } catch (error) {
                        console.error('加载个人资料失败:', error);
                        alert('加载个人资料失败');
                    }
                },
                async handleSubmit() {
                    try {
                        // 验证新密码
                        if (this.form.current_password) {
                            if (!this.form.new_password || !this.form.confirm_password) {
                                alert('请填写新密码和确认密码');
                                return;
                            }
                            if (this.form.new_password !== this.form.confirm_password) {
                                alert('两次输入的新密码不一致');
                                return;
                            }
                        }

                        // 构建更新数据
                        const updateData = {
                            email: this.form.email
                        };

                        // 如果有密码修改，添加密码相关字段
                        if (this.form.current_password) {
                            updateData.current_password = this.form.current_password;
                            updateData.new_password = this.form.new_password;
                        }

                        await window.apiClient.put(`/api/users/${this.currentUser.id}`, updateData);
                        alert('保存成功！');
                        
                        // 清空密码字段
                        this.form.current_password = '';
                        this.form.new_password = '';
                        this.form.confirm_password = '';
                    } catch (error) {
                        console.error('保存失败:', error);
                        alert(error.response?.data?.detail || '保存失败');
                    }
                },
                handleLogout() {
                    auth.logout();
                }
            }
        });
    </script>
</body>
</html> 